<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="80%"
    append-to-body
  >
    <div>
      <div class="name">LD123料单</div>

      <div class="mb-20">
        <el-row>
          <el-col :span="24">
            <div class="mb-10">分部分项：一工区</div>
          </el-col>
          <el-col :span="8">
            <div class="mb-10">构件个数：9</div>
          </el-col>
          <el-col :span="8">
            <div class="mb-10">料单总重：9t</div>
          </el-col>
          <el-col :span="8">
            <div class="mb-10">需用日期：2022-04-28</div>
          </el-col>
          <el-col :span="24">
            <div class="mb-10">备注：</div>
          </el-col>
        </el-row>
      </div>

      <div v-for="(item, index) in tableData" :key="index">
        <div class="tableHeader" :style="index !== tableData.length - 1 ? '' : 'border-top: 0px;'">
          <div>{{ item.name }}</div>
          <div>构件数量：{{ item.num }}</div>
          <div>单重：{{ item.singleWeight }} 总重：{{ item.grossWeight }}</div>
        </div>
        <el-table v-loading="loading" ref="multipleTable" :data="item.list" border>
          <el-table-column label="序号" width="55" align="center">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="name" label="直径" align="center"></el-table-column>
          <el-table-column prop="name" label="钢筋简图(mm)" align="center"></el-table-column>
          <el-table-column prop="name" label="单长(mm)" align="center"></el-table-column>
          <el-table-column prop="name" label="根数" align="center"></el-table-column>
          <el-table-column prop="name" label="总根数" align="center"></el-table-column>
          <el-table-column prop="name" label="理重" align="center"></el-table-column>
          <el-table-column prop="name" label="备注" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      dialogVisible: false,
      title: "",

      loading: false,
      tableData: [
        {
          name: '1#TL1',
          num: '1',
          singleWeight: '1',
          grossWeight: '1',
          list: [
            {
              date: "2016-05-03",
              name: "王小虎",
              value: '0'
            },
            {
              date: "2016-05-02",
              name: "王小虎",
              value: '0'
            }
          ]
        }, {
          name: '2#TL2',
          num: '2',
          singleWeight: '2',
          grossWeight: '2',
          list: [
            {
              date: "2016-05-03",
              name: "王小虎",
              value: '0'
            },
            {
              date: "2016-05-02",
              name: "王小虎",
              value: '0'
            }
          ]
        }
      ],
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    see() {
      this.dialogVisible = true;
      this.title = "LD123料单详情查看";
    },
  },
};
</script>

<style scoped lang="scss">
.mb-20 {
  margin-bottom: 20px;
}
.mb-10 {
  margin-bottom: 10px;
}
.name {
  font-weight: 700;
  font-size: 16px;
  color: #101010;
  margin-bottom: 20px;
}
.tableHeader {
  display: flex;
  justify-content: space-around;
  color: #515a6e;
  border: 1px solid #dfe6ec;
  border-bottom: 0;
  background-color: #f8f8f9;
  padding: 20px 0;
  font-size: 13px;
  font-weight: 600;
}
</style>
